<template>
    <div>
        <li>
            <!-- 判断有值的时候才显示      写一个修改Pid方法传递id 当pid=传过来的id加颜色 -->
            <div v-if="data.id>0" @click="updatepid(data.id)" :class="pid==data.id?'active':''" :id='data.id'>{{data.name}}</div>
            <!-- 判断有没有子类 判断长度是否大于零 -->
            <ul v-if="data.son && data.son.length>0">
                <!--   循环遍历拿出son          调用son       -->
                <replay v-for='son in data.son' :data='son' :key='son.id'/>
            </ul>
        </li>
        
    </div>
    
</template>

<script>
    export default {
        data(){
            return{
                // 默认pid为零
                pid:0
            }
        },
        name:'replay',
        props:['data'],
        methods:{
            // 接收的参数是当前选中的id
            updatepid(pid){
                // 更新父id
                this.pid=pid
                //去除所有颜色
                // 首先获取所有active元素
                let divlist =document.getElementsByClassName('active')
                // 然后循环
                for(var i=0;i<divlist.length;i++){
                     // 清除颜色
                     divlist[i].classList.remove('active')
                }
               
                // 把当前选中加上颜色
                let prediv = document.getElementById(pid)
                prediv.classList.add('active')
                // 存入localStorage
                localStorage.setItem('pid',pid)
            },
        }
    }
</script>

<style scoped>
.active{
    background: aqua;
}
</style>